<template>
  <view class="all">
    <navigator open-type="navigate" url="/pages/search/index">
      <SearchBtn></SearchBtn>
    </navigator>
    <view class="scroll-view-container">
      <scroll-view scroll-y class="left_list">
        <view
          class="left_item"
          :class="{ active: index === CateIndex }"
          @click="changeNav(index)"
          v-for="(item, index) in cateList"
          :key="item.cat_id"
          >{{ item.cat_name }}</view
        >
      </scroll-view>
      <scroll-view scroll-y class="right_list">
        <view
          class="right_item"
          v-for="item2 in cateList[CateIndex].children"
          :key="item2.cat_id"
          :scroll-top="scrollTop"
          :scroll-with-animation="true"
        >
          <view class="right_title">/ {{ item2.cat_name }} /</view>
          <view class="right_contain">
            <view
              class="right_item3"
              v-for="item3 in item2.children"
              :key="item3.cat_id"
              @click="goGoodsList(item3.cat_id, item3.cat_name)"
            >
              <image
                style="width: 80%; height: 100%"
                :src="item3.cat_icon"
                mode="widthFill"
              />
              <text>{{ item3.cat_name }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getCateListAPI } from "@/api/category";
export default {
  data() {
    return {
      cateList: [],
      // 切换分类
      CateIndex: 0,
      scrollTop: 0,
    };
  },
  onLoad() {
    this.getCateList();
  },
  methods: {
    async getCateList() {
      const res = await getCateListAPI();
      this.cateList = res.message;
    },
    // 切换类别
    changeNav(index) {
      this.CateIndex = index;
      this.scrollTop = 0;
    },
    //跳转商品列表
    goGoodsList(id, name) {
      uni.navigateTo({
        url: "/pages/goods_list/index?cid=" + id + "&query=" + name,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.all {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .scroll-view-container {
    display: flex;
    overflow: hidden;
    .left_list {
      width: 30%;
      .left_item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100rpx;
        font-size: 26rpx;
        background-color: #f7f7f7;
        &.active {
          position: relative;

          &::before {
            content: "";
            display: flex;
            width: 5rpx;
            height: 50%;
            background-color: #eb4652;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
    .right_list {
      .right_item {
        .right_title {
          font-size: 26rpx;
          font-weight: bold;
          text-align: center;
          padding: 30rpx 0;
        }

        .right_contain {
          display: flex;
          flex-wrap: wrap;

          .right_item3 {
            display: flex;
            align-items: center;
            flex-direction: column;
            padding-bottom: 25rpx;
            width: 33%;
            height: 140rpx;
          }
        }
      }
    }
  }
}
</style>